import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import {
    Tabs, Toast, Flex, Card, Button, Badge, DatePicker, List
} from 'antd-mobile';
import { dateFormat } from "../../../model/code";
import http from "../../../model/http";  
import Header from "../../../components/header/Header";
import './soundDetail.less'
import backIcon from '../../../libs/img/other/back.png'

import '../../../libs/font/iconfont.css';
// import Vconsole from 'vconsole'
// const vConsole = new Vconsole()
/**
 * @name 判断iOS
 */
const isiOS = () => {
    let u = navigator.userAgent;
    let iOs = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端\
    return iOs;
}
function SoundDetail() {
    
    const history = useHistory()
    // begintime: value.begintime,
    // endtime:value.endtime,
    // deptId:value.deptId
  
    // console.log(history.location.state.deptId)
    const nowTimeStamp = new Date();
    // begintime: dateFormat(date,'yyyy-MM-dd'),
    // endtime: dateFormat(date2,'yyyy-MM-dd')


    const [date, setDate] = useState(history.location.state.begintime);
    const [date2, setDate2] = useState(history.location.state.endtime)
  
    // 列表数据
    const [listData,setListData] = useState([])
   
  
    /*渲染完成*/
    useEffect(async () => { 
        listFunc()
        // let data = [{"counts":49,"dept_group_id":"DE0001","dept_id":"DPT20211110000007","name":"现场乳房组","username":"高慧清","erp_id":"S001001038"},{"counts":18,"dept_group_id":"DE0001","dept_id":"DPT20211110000007","name":"现场乳房组","username":"何燕","erp_id":"S001000890"},{"counts":41,"dept_group_id":"DE0001","dept_id":"DPT20211110000007","name":"现场乳房组","username":"迟可欣","erp_id":"S001000939"}]
        // setListData(data)
    }, [])
      // 查询
    const submitSearch = () => {    
        listFunc()
    }
  
    // 请求
    const listFunc = async() => {
        // http://wxwork.gzsg.cn/wxwork/feedback/wxworkrecordScountMancount?userId=SG01016&hosId=1&managerId=1000920&
        // begintime=2022-03-20&endtime=2022-03-22&deptId=DPT20211110000007
        const result = await http.get('/feedback/wxworkrecordScountMancount',{
            // type: type,
            // begintime:history.location.state.begintime,
            // endtime: history.location.state.endtime,
            begintime: dateFormat(date,'yyyy-MM-dd'),
            endtime:  dateFormat(date2,'yyyy-MM-dd'),
            deptId:history.location.state.deptId
        })
        if(result.code == 0){  
            setListData(result.data)         
        }
    }
    // 点击list 的时候跳转到详情
    const listClick = async (value) => {
        history.push(`/clientReview/customerList`,{
            // begintime=2022-03-20&endtime=2022-03-22
            begintime: dateFormat(date,'yyyy-MM-dd'),
            endtime:  dateFormat(date2,'yyyy-MM-dd'),
            erp_id:value.erp_id,
            dept_id:history.location.state.deptId
        })
    }
   
    const listHtml = (
        listData.map((elem,idex) => (
            <div  
                className='userList-row g-flex g-x-between g-mt32' 
                style={{margin:'10px', backgroundColor: '#FFFFFF'}}
                onClick={() => listClick(elem)}
            >
                <div className='layout' >                
                    <div className='g-ml20 g-f24'>                   
                        <p className='' style={{lineHeight:'0.4rem'}}>{elem.username}</p>            
                    </div>
                    <div>
                    <Badge style={{"top":"-5px"}} className='badge' text={elem.counts} overflowCount={999}></Badge>    
                    <img style={{"position":"relative","top":"-9px"}} class="backIcon" src={backIcon} /> 
                    </div>            
                </div>           
            </div>
        ))
    )
     
    return (
        <div className="v-return-visit">
            <div className='body-background-div'></div>
            <List className='g-mb10 g-p5-10 g-bg-f g-bdrs12 appointmentRecord-list-search-box'>

                <Flex>
                    <Flex.Item>
                        <DatePicker mode="date" value={date} onChange={d => {
                            setDate(d)
                            let dateNum = new Date(d).getTime()
                            let date2Num = new Date(date2).getTime()
                            if (Number(dateNum) > Number(date2Num)) {
                                setDate2(d)
                            }
                        }}>
                            <List.Item arrow="horizontal"></List.Item>
                        </DatePicker>
                    </Flex.Item>
                    <Flex.Item>
                        <DatePicker mode="date" value={date2} minDate={date} onChange={d => { setDate2(d) }}>
                            <List.Item arrow="horizontal"></List.Item>
                        </DatePicker>
                    </Flex.Item>
                    <Flex.Item><Button type="primary" size="small" className="appointmentRecord-list-search" onClick={() => submitSearch()} style={{ backgroundColor: '#39f', border: '1px solid #39f' }}>查询</Button></Flex.Item>
                </Flex>

            </List>
            <div style={{ paddingTop: '53px' }}>
                    {listData.length > 0 ? (
                         listHtml
                    ):<div className='test-color'>暂无更多数据</div>}
            </div>


            {/* <Button className={isiOSBool ? 'frequency-next-step2' : 'frequency-next-step'} type="warning" onClick={nextStep}>新增回访</Button> */}
           
            <Header />
        </div>
    )
}
export default SoundDetail;